<script setup>
  import {getCode, forgetPassword} from '@/api/login'

  const {proxy} = getCurrentInstance()
  const props = defineProps({
    modelValue: {
      type: Boolean,
      default: false
    }
  })
  const emits = defineEmits()
  // 控制弹框显隐
  const open = computed({
    get() {
      return props.modelValue
    },
    set(val) {
      emits('update:modelValue', val)
    }
  })
  const form = ref({})
  const formRef = ref(null)
  // 控制发送验证码
  const isCode = ref(false)
  const time = ref(60)
  const timer = ref(null)

  function resetTimer() {
    isCode.value = false
    time.value = 60
    clearInterval(timer)
  }
  // 发送验证码
  function sendCode() {
    formRef.value.validate(['email']).then(() => {
      getCode({email: form.value.email}).then(() => {
        isCode.value = true
        timer.value = setInterval(() => {
          time.value--
          if(time.value===1) {
            resetTimer()
          }
        }, 1000)
      })
    })
  }
  function cancel() {
    form.value = {}
    formRef.value.resetValidation()
  }
  // 提交修改
  function submitForm() {
    formRef.value.validate().then(() => {
      forgetPassword(form.value).then(() => {
        emits('update:modelValue', false)
      })
    })
  }
</script>

<template>
  <van-popup
    v-model:show="open"
    @close="cancel"
  >
    <div class="h-cell">
        <p>{{$t('login.forgetPassword')}}</p>
        <p>{{$t('login.forgetSub')}}</p>
    </div>
    <van-form
      ref="formRef"
      validate-trigger="['onSubmit']"
    >
      <c-input
        name="email"
        v-model:value="form.email"
        :placeholder="`${$t('login.email')}*`"
        :rules="[
          { required: true, message: $t('login.emailTip') },
          {
            pattern: new RegExp(/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/),
            message: $t('login.emailTips'),
          }
        ]"
      />
      <c-input
        name="code"
        v-model:value="form.code"
        :placeholder="`${$t('login.code')}*`"
        :funIcon="true"
        :rules="[{ required: true, message: $t('login.codeTip')}]"
      >
          <van-button
            @click="sendCode"
            :disabled="isCode"
          >
            {{`${isCode?time+'s':$t('login.getCode')}`}}
          </van-button>
      </c-input>
      <c-input
        name="password"
        v-model:value="form.password"
        :placeholder="`${$t('login.newPassword')}*`"
        type="password"
        :rules="[{ required: true, message: $t('login.newPasswordTip')}]"
      />
    </van-form>
    <van-button class="s-btn" @click="submitForm">{{$t('common.confirm')}}</van-button>
  </van-popup>
</template>

<style scoped lang="scss">
.van-popup  {
  padding: 24px;
  width: calc(100% - 64px);
  border-radius: 2px;
  .h-cell {
    text-align: center;
    margin-bottom: 20px;
    p {
      margin: 0;
      color: #8C8C8C;
      font-size: 12px;
      &:first-child {
        color: #262626;
        font-size: 16px;
        margin-bottom: 5px;
      }
    }
  }
}
</style>